<template>
  <div>
    <navbar></navbar>
    <div class="wrapper">
        <el-dialog title="申请网店" :visible.sync="dialogNewStoreVisible">
          <el-form :model="newStore">
            <el-form-item label="网店图片：" :label-width="formLabelWidth">
              <input type="file" id="dialogNewStorePicture" @change="newStoreSelectPic" style="display: none">
              <el-button v-show="!newStoreConfig.hasPic" onclick="document.getElementById('dialogNewStorePicture').click()" type="primary">选择图片</el-button>
              <img v-show="newStoreConfig.hasPic" style="width: 150px;height: 150px" :src="newStore.store_picture" alt="">
              <el-button v-show="newStoreConfig.hasPic" onclick="document.getElementById('dialogNewStorePicture').click()" type="primary">更换图片</el-button>
            </el-form-item>
            <el-form-item label="网店中文名：" :label-width="formLabelWidth">
              <el-input v-model="newStore.store_name_cn" class="input"></el-input>
            </el-form-item>
            <el-form-item label="网店英文名：" :label-width="formLabelWidth">
              <el-input v-model="newStore.store_name_en" class="input"></el-input>
            </el-form-item>
            <el-form-item label="品牌中文名：" :label-width="formLabelWidth">
              <el-input v-model="newStore.brand_name_cn" class="input"></el-input>
            </el-form-item>
            <el-form-item label="品牌英文名：" :label-width="formLabelWidth">
              <el-input v-model="newStore.brand_name_en" class="input"></el-input>
            </el-form-item>
            <el-form-item label="品牌简介：" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                v-model="newStore.brand_intro"
                class="input" style="font-family: inherit"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogNewStoreVisible = false">取 消</el-button>
            <el-button type="primary" @click="applyNewStore">确 定</el-button>
          </div>
        </el-dialog>
      <el-container>
        <el-aside width="200px" class="menu">
          <el-menu v-if="!hasStore">
            <el-menu-item index="1-1" v-on:click="dialogNewStoreVisible=true">
              <span class="menu-title">申请网店</span>
            </el-menu-item>
          </el-menu>
          <el-menu v-else>
              <el-menu-item index="1-1" v-on:click="content_index=1">
                <span class="menu-title">网店信息</span>
              </el-menu-item>
              <el-menu-item index="1-2" v-on:click="content_index=2">
                <span class="menu-title">上架货物</span>
              </el-menu-item>
              <el-menu-item index="1-3" v-on:click="content_index=3">
                <span class="menu-title">历史货物</span>
              </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main v-if="hasStore">

            <div v-show="content_index===1">
              <el-form :model="store_info" style="width: 60%">
                <el-form-item label="网店图片：" :label-width="formLabelWidth">
                  <input type="file" id="modifyStorePicture" @change="modifyStoreSelectPic" style="display: none">
                  <img style="width: 150px;height: 150px" :src="store_info.store_picture" alt="">
                  <el-button onclick="document.getElementById('modifyStorePicture').click()" type="primary">更换图片</el-button>
                </el-form-item>
                <el-form-item label="网店编号：" :label-width="formLabelWidth">
                  <el-input v-model="store_info.store_id" disabled class="input"></el-input>
                </el-form-item>
                <el-form-item label="网店中文名：" :label-width="formLabelWidth">
                  <el-input v-model="store_info.store_name_cn" class="input"></el-input>
                </el-form-item>
                <el-form-item label="网店英文名：" :label-width="formLabelWidth">
                  <el-input v-model="store_info.store_name_en" class="input"></el-input>
                </el-form-item>
                <el-form-item label="品牌中文名：" :label-width="formLabelWidth">
                  <el-input v-model="store_info.brand_name_cn" class="input"></el-input>
                </el-form-item>
                <el-form-item label="品牌英文名：" :label-width="formLabelWidth">
                  <el-input v-model="store_info.brand_name_en" class="input"></el-input>
                </el-form-item>
                <el-form-item label="品牌简介：" :label-width="formLabelWidth">
                  <el-input
                    type="textarea"
                    v-model="store_info.brand_intro"
                    class="input" style="font-family: inherit"></el-input>
                </el-form-item>
              </el-form>
              <div style="width: 60%;display: flex;justify-content: flex-end">
                <el-button type="primary" @click="modifyStore">修改信息</el-button>
              </div>
            </div>
            <div v-show="content_index===2">
              <div class="search-container">

              </div>
              <el-table :data="onSellList">
                <el-table-column
                  prop="item_id"
                  label="商品编号"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="item_name"
                  label="商品名称"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="item_price"
                  label="价格"
                  width="150">
                </el-table-column>
                <el-table-column
                  v-if="type_id===1"
                  prop="item_num"
                  label="库存"
                  width="150">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click="openDetail(scope.row)">查看详细信息</el-button>
                    <el-button @click="changeNum(scope.row)" v-if="type_id===1" type="primary">修改库存</el-button>
                    <el-button @click="goDown(scope.row)" type="warning">下架</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div>
                <el-button @click="addMerchandiseVisible=true" style="margin-left: 700px;margin-top: 20px">添加新商品</el-button>
              </div>
            </div>
            <div v-show="content_index===3">
              <div class="search-container">

              </div>
              <el-table :data="offSellList">
                <el-table-column
                  prop="item_id"
                  label="商品编号"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="item_name"
                  label="商品名称"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="item_price"
                  label="价格"
                  width="150">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click="openDetail(scope.row)">查看详细信息</el-button>
                    <el-button @click="goUp(scope.row)" type="primary">上架</el-button>
                    <el-button @click="deleteGood(scope.row)" type="danger">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-dialog title="商品详细信息" :visible.sync="merchandiseDetailVisible">
              <el-form :model="merchandiseDetail">
                <el-form-item label="商品编号：" :label-width="formLabelWidth">
                  <el-input v-model="merchandiseDetail.item_id" class="input" disabled></el-input>
                </el-form-item>
                <el-form-item label="一级分类编号：" :label-width="formLabelWidth">
                  <el-input v-model="merchandiseDetail.type_id" class="input" disabled></el-input>
                </el-form-item>
                <el-form-item label="二级分类编号：" :label-width="formLabelWidth">
                  <el-input v-model="merchandiseDetail.sub_type_id" class="input" disabled></el-input>
                </el-form-item>
                <el-form-item label="借卖方编号：" :label-width="formLabelWidth">
                  <el-input v-model="merchandiseDetail.user_id" class="input" disabled></el-input>
                </el-form-item>
                <el-form-item label="店铺编号：" :label-width="formLabelWidth">
                  <el-input v-model="merchandiseDetail.store_id" class="input" disabled></el-input>
                </el-form-item>
                <el-form-item label="商品名称：" :label-width="formLabelWidth">
                  <el-input v-model="merchandiseDetail.item_name" class="input" :disabled="!modifyDetail"></el-input>
                </el-form-item>
                <el-form-item label="商品图片：" :label-width="formLabelWidth">
                  <img :src="merchandiseDetail.item_picture" style="width: 100px;height: 100px" alt="">
                  <input type="file" id="modifyDetailPicture" @change="modifyDetailPicture" style="display: none">
                  <el-button v-show="modifyDetail" onclick="document.getElementById('modifyDetailPicture').click()">选择图片</el-button>
                </el-form-item>
                <el-form-item label="商品描述：" :label-width="formLabelWidth">
                  <el-input v-model="merchandiseDetail.item_intro" class="input" type="textarea" :disabled="!modifyDetail"></el-input>
                </el-form-item>
                <el-form-item label="商品价格：" :label-width="formLabelWidth">
                  <el-input v-model="merchandiseDetail.item_price" class="input" :disabled="!modifyDetail"></el-input>
                </el-form-item>
                <el-form-item label="商品库存：" :label-width="formLabelWidth">
                  <el-input v-model="merchandiseDetail.item_num" class="input" :disabled="!(modifyDetail&&type_id===1)"></el-input>
                </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button v-show="!modifyDetail" @click="modifyDetail = true">修改详细</el-button>
                <el-button v-show="modifyDetail" @click="modifyItem">提交修改</el-button>
                <el-button @click="merchandiseDetailVisible = false">关闭</el-button>
              </div>
            </el-dialog>
            <el-dialog title="添加新商品" :visible.sync="addMerchandiseVisible">
              <el-form :model="newMerchandise">
                <el-form-item label="商品名称：" :label-width="formLabelWidth">
                  <el-input v-model="newMerchandise.item_name" class="input"></el-input>
                </el-form-item>
                <el-form-item label="商品图片：" :label-width="formLabelWidth">
                  <img :src="newMerchandise.item_picture" style="width: 100px;height: 100px" alt="">
                  <input type="file" id="addMerchandisePicture" @change="addMerchandisePicture" style="display: none">
                  <el-button onclick="document.getElementById('addMerchandisePicture').click()">选择图片</el-button>
                </el-form-item>
                <el-form-item label="商品描述：" :label-width="formLabelWidth">
                  <el-input v-model="newMerchandise.item_intro" class="input" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="商品价格：" :label-width="formLabelWidth">
                  <el-input v-model="newMerchandise.item_price" class="input"></el-input>
                </el-form-item>
                <el-form-item label="商品库存：" :label-width="formLabelWidth">
                  <el-input v-model="newMerchandise.item_num" class="input"></el-input>
                </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addItem">添加商品</el-button>
                <el-button @click="addMerchandiseVisible = false">关闭</el-button>
              </div>
            </el-dialog>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>

</template>

<style>
.wrapper-inner{
  /*width: 80%;*/
  margin: 30px auto;
  display: flex;
  align-items: flex-start;
}
.side {
  width: 150px;

  /*background: #e3e3e3;*/
  border-radius: 5px;
  border: 1px #333333 solid;

}
.selector {
  height: 50px;
  line-height: 50px;

  text-align: center;
  cursor: pointer;
}
.content {
  flex: 1;
  height: 500px;

  /*border-radius: 5px;*/

}
</style>

<script>
import navbar from "../components/navbar";
export default {
  name:'store_management',
  components:{navbar},
  data(){
    return{
      type_id:this.$store.state.user.type_id,
      // type_id:1,//测试用
      store_info:this.$store.state.manage.store_info,
      onSellList:this.$store.state.manage.onSellList,
      offSellList:this.$store.state.manage.offSellList,

      newStore:{
        store_picture:'',
        store_name_cn:'',
        store_name_en:'',
        brand_name_cn:'',
        brand_name_en:'',
        brand_intro:'',
      },
      merchandiseDetail:{
        item_id:'商品编号',
        type_id:'一级分类',
        sub_type_id:'二级分类',
        user_id:'卖家编号',
        store_id:'店铺编号',
        item_name:'品名',
        item_intro:'描述',
        item_picture:'图片',
        item_price:'价格',
        item_num:'库存',
      },
      newMerchandise:{
        item_name:'',
        item_intro:'',
        item_picture:'',
        item_price:'',
        item_num:'',
        store_id:this.$store.state.manage.store_info.store_id,
      },

      newStoreConfig:{
        hasPic:false
      },
      hasStore:false,
      dialogNewStoreVisible:false,
      merchandiseDetailVisible:false,
      content_index:1,
      modifyDetail:false,
      addMerchandiseVisible:false,

      formLabelWidth:'120px',
    }
  },
  methods:{
    //申请网点选择图片
    newStoreSelectPic(){
      console.log('申请网店选择图片');
      let file = document.getElementById('dialogNewStorePicture').files[0]
      // console.log(file);
      let that=this;

      let reader = new FileReader();        //通过文件流将文件转换成Base64字符串
      if (file) {
        reader.readAsDataURL(file);
        reader.onloadend = ()=> {
          this.newStore.store_picture=reader.result;
          this.newStoreConfig.hasPic=true;
          that.$message.success('选择图片成功！')
        }
      }
    },
    //申请网店
    applyNewStore(){
      console.log('创建新网店');
      this.$store.dispatch('manage/initStore',this.newStore).then(()=>{
        this.$message.success('创建成功！');
        this.$store.dispatch('manage/getStore').then(()=>{
          this.store_info=this.$store.state.manage.store_info;
          this.hasStore=true;
        })
      }).catch(e=>{
        this.$message.error('创建失败！');
      })
    },
    //修改网店信息选择图片
    modifyStoreSelectPic(){
      console.log('申请网店选择图片');
      let file = document.getElementById('modifyStorePicture').files[0]
      let that=this;

      let reader = new FileReader();        //通过文件流将文件转换成Base64字符串
      if (file) {
        reader.readAsDataURL(file);
        reader.onloadend = ()=> {
          this.store_info.store_picture=reader.result;
          // this.$store.commit('manage/loadNewPic',reader.result);
          that.$message.success('选择图片成功！')
        }
      }
    },
    //修改网点信息
    modifyStore(){
      this.$store.dispatch('manage/modifyStore',this.store_info).then(()=>{
        this.$message.success('修改网店信息成功！');
        this.$store.dispatch('manage/getStore');
      }).catch(e=>{
        this.$message.error('修改网店信息失败！');
      })
    },
    //打开商品详情页面
    openDetail(a){
      this.merchandiseDetailVisible=true;
      this.$store.dispatch('manage/getItem',a.item_id).then((res)=>{
        this.merchandiseDetail=res;
        this.merchandiseDetailVisible=true;
      })
    },
    //商品详情修改图片
    modifyDetailPicture(){
      console.log('修改商品详情选择图片');
      let file = document.getElementById('modifyDetailPicture').files[0]
      let that=this;

      let reader = new FileReader();        //通过文件流将文件转换成Base64字符串
      if (file) {
        reader.readAsDataURL(file);
        reader.onloadend = ()=> {
          that.merchandiseDetail.item_picture=reader.result;
          that.$message.success('选择图片成功！')
        }
      }
    },
    //修改商品详情
    modifyItem(){
      let temp=Number(this.merchandiseDetail.item_price)
      if (isNaN(temp)||temp<=0){
        this.$message.error('价格格式错误！');
        return;
      }
      temp=Number(this.merchandiseDetail.item_num);
      if ((isNaN(temp)||temp<0)&&this.type_id!==2){
        this.$message.error('商品数量格式错误！');
        return;
      }
      if (this.type_id===2){
        this.merchandiseDetail.item_num=1;
      }
      this.$store.dispatch('manage/modifyItem',this.merchandiseDetail).then(res=>{
        this.$message.success('修改成功！');
        this.refresh();
        this.modifyDetail = false;
      }).catch(e=>{
        this.$message.error('修改失败！');
      })
    },
    //添加新商品（无中生有）选择图片
    addMerchandisePicture(){
      console.log('添加商品选择图片');
      let file = document.getElementById('addMerchandisePicture').files[0]
      let that=this;

      let reader = new FileReader();        //通过文件流将文件转换成Base64字符串
      if (file) {
        reader.readAsDataURL(file);
        reader.onloadend = ()=> {
          that.newMerchandise.item_picture=reader.result;
          that.$message.success('选择图片成功！')
        }
      }
    },
    //添加新商品（无中生有）
    addItem(){
      this.newMerchandise.store_id=this.store_info.store_id;
      this.$store.dispatch('manage/addItem',this.newMerchandise).then(res=>{
        this.$message.success('添加新商品成功！');
        this.merchandiseDetailVisible = false;
        setTimeout(()=>{
          this.refresh()
        },500)
      }).catch(e=>{
        this.$message.error('添加新商品失败！');
      })
    },
    //下架商品
    goDown(a){
      this.$store.dispatch('manage/downItem',a.item_id).then(()=>{
        this.$message.success('下架成功！')
        setTimeout(()=>{
          this.refresh()
        },500)
      }).catch(e=>{
        this.$message.error('下架失败！');
      })
    },
    //上架商品
    goUp(a){
      this.$prompt('请更新库存', '货物上架', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[1-9]\d*/,
        inputErrorMessage: '请输入数字'
      }).then(({ value }) => {
        this.$store.dispatch('manage/onItem', {
          item_id:a.item_id,
          item_num:value,
        }).then(()=>{
          this.$message.success('上架成功！')
          setTimeout(()=>{
            this.refresh()
          },500)
        }).catch(e=>{
          this.$message.error('上架失败！');
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });


    },
    //修改库存（供货商only）
    changeNum(a){
      this.$prompt('请更新库存', '更新库存', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /(^[1-9]\d*$)/,
        inputErrorMessage: '请输入正整数'
      }).then(({ value }) => {
        this.$store.dispatch('manage/modifyNum', {
          item_id:a.item_id,
          item_num:value,
        }).then(()=>{
          this.$message.success('更新库存成功！')
          setTimeout(()=>{
            this.refresh()
          },500)
        }).catch(e=>{
          this.$message.error('更新库存失败！');
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });

    },
    //删除商品
    deleteGood(a){
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('manage/deleteItem',a.item_id).then(()=>{
          this.$message.success('删除成功!')
          setTimeout(()=>{
            this.refresh()
          },500)
        }).catch(e=>{
          this.$message.error('删除失败！')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //刷新函数
    refresh(){
      Promise.all([
        this.$store.dispatch('manage/getOnSellItemAll'),
        this.$store.dispatch('manage/getOffSellItemAll')
      ]).then(res=>{
        this.onSellList=this.$store.state.manage.onSellList;
        this.offSellList=this.$store.state.manage.offSellList;
      })
    }

  },
  created() {
    this.$store.dispatch('manage/getStore').then(()=>{
      console.log('页面内'+this.store_info);
      this.store_info=this.$store.state.manage.store_info;
      this.hasStore=true;
      this.refresh();
    })
  }
}
</script>
